<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Piston Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to mimic the hand-drawn look
        ctx.lineWidth = 2.5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '24px "Comic Sans MS", cursive, sans-serif'; // A font that resembles handwriting

        // --- Define Geometry ---
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;

        // Cylinder
        const cylWidth = 400;
        const cylHeight = 120;
        const cylX = (canvasWidth - cylWidth) / 2;
        const cylY = (canvasHeight - cylHeight) / 2;

        // Piston (in the middle)
        const pistonWidth = 20;
        const pistonX = cylX + (cylWidth / 2) - (pistonWidth / 2);
        const pistonY = cylY;
        const pistonHeight = cylHeight;

        // --- Drawing ---

        // 1. Draw the main cylinder outline
        ctx.strokeRect(cylX, cylY, cylWidth, cylHeight);

        // 2. Draw the piston
        // To avoid the cylinder's middle line showing through, we fill the piston area with white first
        ctx.fillStyle = 'white';
        ctx.fillRect(pistonX, pistonY, pistonWidth, pistonHeight);
        ctx.strokeRect(pistonX, pistonY, pistonWidth, pistonHeight);
        
        // Draw the hatching on the piston
        ctx.save();
        ctx.beginPath();
        ctx.rect(pistonX, pistonY, pistonWidth, pistonHeight);
        ctx.clip(); // Restrict drawing to within the piston's rectangle
        
        ctx.lineWidth = 1.5;
        // Draw diagonal lines from top-right to bottom-left
        for (let i = 0; i < pistonWidth + pistonHeight; i += 8) {
            ctx.moveTo(pistonX + pistonWidth, pistonY + i - pistonWidth);
            ctx.lineTo(pistonX, pistonY + i);
        }
        ctx.stroke();
        ctx.restore(); // Remove the clipping mask

        // 3. Draw the labels
        ctx.fillStyle = 'black'; // Reset fillStyle for text

        // "neon" text in the left compartment
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const leftCompCenterX = cylX + (pistonX - cylX) / 2;
        const compCenterY = cylY + cylHeight / 2;
        ctx.fillText('neon', leftCompCenterX, compCenterY);

        // "argon" text in the right compartment
        const rightCompCenterX = (pistonX + pistonWidth) + (cylX + cylWidth - (pistonX + pistonWidth)) / 2;
        ctx.fillText('argon', rightCompCenterX, compCenterY);

        // "piston" label
        const pistonLabelX = pistonX + 50;
        const pistonLabelY = pistonY - 30;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'bottom';
        ctx.fillText('piston', pistonLabelX, pistonLabelY);

        // "Fig. 1.31." label
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Fig. 1.31.', canvasWidth / 2, cylY + cylHeight + 20);

        // 4. Draw the pointer line for the piston
        ctx.beginPath();
        ctx.moveTo(pistonLabelX - 5, pistonLabelY); // Start from near the 'p' of piston
        ctx.quadraticCurveTo(pistonLabelX - 25, pistonLabelY + 20, pistonX + pistonWidth, pistonY); // Curve to the top-right of the piston
        ctx.stroke();

    </script>
</body>
</html>